<!DOCTYPE html>
<html lang="cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style>
        div {
            display: flex;
        }

        /* 头部 */
        .header {
            width: 100%;
            height: 60px;
            background-color: rgb(216, 71, 71);
            justify-content: center;
            color: #fff;
        }

        .box {
            width: 1200px;
            justify-content: space-between;
        }

        .box .left {
            flex-direction: column;
            justify-content: center;
        }

        .box .right {
            flex-direction: row;
            align-items: center;
        }

        .box .right div {
            margin-right: 10px;
        }

        /* 标题 */
        .title {
            justify-content: center;
        }

        .title .xia {
            width: 80px;
            height: 5px;
            align-self: center;
            margin-bottom: 30px;
            background-color: rgb(218, 80, 80);
        }

        /* 中间 */
        .main {
            width: 1200px;
            justify-content: space-between;
        }

        .main .img-box img {
            width: 250px;
            height: 350px;
            background-color: aqua;
            flex-direction: column;
        }

        .main .img-box {
            flex-direction: column;
        }

        .main .img-box div {
            background-color: rgb(247, 220, 211);
            justify-content: center;
        }

        /* 尾部 */
        .tail {
            width: 100%;
            height: 150px;
            margin-top: 50px;
            background-color: rgb(148, 57, 24);
            color: #fff;
            justify-content: center;
        }
    </style>
    <title>电影</title>
</head>

<body>
    <div class="header">
        <div class="box">
            <div class="left">
                <span>我的爱好</span>
            </div>
            <div class="right">
                <div>喜欢的电影</div>
                <div>喜欢的书</div>
                <div>我的博客</div>
            </div>
        </div>
    </div>
    <div class="title">
        <div style="flex-direction: column;">
            <h2>最喜欢的电影</h2>
            <span class="xia"></span>
        </div>
    </div>
    <div id="dianying" style="width: 100%;height: 400px; justify-content: center;">
        <div class="main">
            <div class="img-box">
                <img
                    src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=223809031,3004709836&fm=26&gp=0.jpg">
                <div>超能陆战队</div>
            </div>
            <div class="img-box">
                <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=117985321,655607861&fm=26&gp=0.jpg">
                <div>铁道游击队</div>
            </div>
            <div class="img-box">
                <img
                    src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=150178274,3000800329&fm=26&gp=0.jpg">
                <div>神话</div>
            </div>
            <div class="img-box">
                <img
                    src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1004371754,453574517&fm=11&gp=0.jpg">
                <div>禹神传</div>
            </div>
        </div>
    </div>
    <div class="title">
        <div style="flex-direction: column;">
            <h2>最喜欢的电影</h2>
            <span class="xia"></span>
        </div>
    </div>
    <div style="width: 100%;height: 400px; justify-content: center;">
        <div class="main">
            <div class="img-box">
                <img
                    src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3307950492,270227960&fm=26&gp=0.jpg">
                <div>慢是美好的</div>
            </div>
            <div class="img-box">
                <img
                    src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3339262098,453785802&fm=26&gp=0.jpg">
                <div>花千骨</div>
            </div>
            <div class="img-box">
                <img
                    src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1847702706,1818504079&fm=26&gp=0.jpg">
                <div>金融社会主义</div>
            </div>
            <div class="img-box">
                <img
                    src="https://pic.rmb.bdstatic.com/dc24afd7ef02e4df99fa613362d3fc33.jpeg@wm_2,t_55m+5a625Y+3L+aWsOeWhuaYr+S4quWlveWcsOaWuQ==,fc_ffffff,ff_U2ltSGVp,sz_15,x_10,y_10">
                <div>创业计划书</div>
            </div>
        </div>
    </div>
    <div class="tail">
        <div style="justify-content: space-between;width:1200px;align-items:center">
            <div style="justify-content: center;">我会住在其中一颗星星</div>
            <div style="align-self: flex-end;margin-bottom: 10px;">版权所有 &copy; 陈滨淮</div>
            <div
                style="width: 100px;height: 100px;border:4px solid #fff; background-image: url('https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1805103632,2396162225&fm=26&gp=0.jpg');background-size: cover">
            </div>
        </div>
    </div>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        axios.post("http://mock-api.com/VnZrJNnw.mock/login")
            .then(function (res) {
                var dianying = document.getElementById("dianying");
                console.log(res.data)
                for (let i = 0; i < res.data.length; i++) {
                    var main = document.createElement("div"); //总盒子
                    main.className = "main";
                    var imgBox = document.createElement("div"); //图片盒子
                    imgBox.className = "img-box";
                    var img = document.createElement("img"); // 图片
                    var name = document.createElement("div");
                    name.innerHTML = res.data[i].imgName;
                    img.src = res.data[i].imgUrl;
                    imgBox.appendChild(img, name);
                    main.append(imgBox);
                }
                dianying.append(main);
            })
            .catch(function (error) {
                console.log(error)
            })
    </script>
</body>

</html>